<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索</title>
<link rel="stylesheet" href="css/search.css">
</head>
<body>
		<div id="box">
		<div id="header">
			<div class="myheader">
				<div class="header_left">
					<img src="images/shouye.webp" class="shouyeImg">
					<a href="index.jsp">天猫首页</a>&nbsp;&nbsp;
					<span>喵，欢迎来天猫</span>&nbsp;&nbsp;
					<a href="login.jsp">请登录</a>&nbsp;&nbsp;
					<a href="register.jsp">免费注册</a>
				</div>
				<div class="header_right">
					<a href="#">官网首页</a>&nbsp;&nbsp;
					<div class="myshow1">
						<a href="" class="mymove1">我的淘宝</a>&nbsp;&nbsp;
						<div id="mytaobao">
							<a href="#">已买到的宝贝</a><br>
							<a href="#">已卖出的宝贝</a>
						</div>
					</div>
					<img src="images/car.png">
					<a href="shopcar.jsp">购物车</a>&nbsp;&nbsp;
					<div class="myshow2">
						<a href="collect.do" class="mymove2">收藏夹</a>&nbsp;&nbsp;|&nbsp;&nbsp;
						<div id="shoucangjia">
							<a href="#">收藏的宝贝</a><br>
							<a href="#">收藏的店铺</a>
						</div>
					</div>
					
					<a href="#">商品分类</a>&nbsp;&nbsp;
					<a href="#">免费开店</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
					<a href="#">千牛卖家中心</a>&nbsp;&nbsp;
					<a href="#">联系客服</a>
				</div>
			</div>
		</div>
		<div id="mysearch">
			<div class="myimg">
				<img src="images/tm.png">
			</div>
			<div class="search">
				<form>
					<input type="text" name="keyword" placeholder="搜索 天猫 商品/品牌/店铺" id="search">
					<input type="button" value="搜索">
				</form>

				<p>
					<a href="#">女装秋</a>&nbsp;|&nbsp;
					<a href="#">女装上衣</a>&nbsp;|&nbsp;
					<a href="#">女裤</a>&nbsp;|&nbsp;
					<a href="#">连衣裙</a>&nbsp;|&nbsp;
					<a href="#">女装夏</a>&nbsp;|&nbsp;
					<a href="#">裙子</a>&nbsp;|&nbsp;
					<a href="#">女装套装</a>&nbsp;|&nbsp;
					<a href="#">女装外套</a>
				</p>
			</div>
		</div>
		<div id="tbody">
			<div class="top">
				<div class="top1"></div>
				<div class="top2"></div>
				<div class="top3"></div>
				<div class="top4"></div>
				<div class="top5"></div>
			</div>
			<div class="center">
				<div class="top6"></div>
				<div class="top7"></div>
				<div class="top8"></div>
				<div class="top9"></div>
				<div class="top10"></div>
			</div>
			<div class="bottom">
				<div class="top11"></div>
				<div class="top12"></div>
				<div class="top13"></div>
				<div class="top14"></div>
				<div class="top15"></div>
			</div>
			
			<div class="pageInfor">
	
			</div>
			<div class="bottomSearch">
				<form>
					<input type="text" name="keyword" placeholder="搜索 天猫 商品/品牌/店铺">
					<input type="button" value="搜索" class="mysearch">
				</form>
			</div>
		</div>
		
		<div id="footer">
			<div class="footer_top">
				<div class="footer_top_one">
					<a href="index.jsp">
						<div class="you">
							优
						</div>
					</a>
					<div class="span1">
						品质保障<br>
						<a href="">品质护航</a>
						<a href="">购物无忧</a>
					</div>
				
				</div>
				<div class="footer_top_two">
					<a href="">
						<div class="qi">
							七
						</div>
					</a>
					<div class="span1">
						七天无理由退换货<br>
						<a href="">为您提供售后无忧保障</a>
					</div>
					
				</div>
				<div class="footer_top_three">
					<a href="">
						<div class="te">
							特
						</div>
					</a>
					<div class="span1">
						特色服务体验<br>
						<a href="">为您呈现不一样的服务</a>
					</div>
				</div>
				<div class="footer_top_fore">
					<a href="">
						<div class="bang">
							帮
						</div>
					</a>
					<div class="span1">
						帮助中心<br>
						<a href="">您的购物指南</a>
					</div>
				</div>
			</div>
			<div class="footer_center">
				<div class="footer_center_one">
					购物指南<br>
					<a href="">免费注册</a><br>
					<a href="">开通支付宝</a><br>
					<a href="">支付宝充值</a>
				</div>
				<div class="footer_center_two">
					天猫保障<br>
					<a href="">发票保障</a><br>
					<a href="">售后规则</a><br>
					<a href="">物流实效保障</a>
				</div>
				<div class="footer_center_three">
					支付方式<br>
					<a href="">快捷支付</a><br>
					<a href="">幸运卡</a><br>
					<a href="">支付宝</a><br>
					<a href="">蚂蚁花呗</a>
				</div>
				<div class="footer_center_fore">
					商家服务<br>
					<a href="">天猫规则</a><br>
					<a href="">商家入住</a><br>
					<a href="">商家中心</a><br>
					<a href="">天猫必修课</a><br>
					<a href="">喵言喵语</a><br>
					<a href="">运营服务</a>
				</div>
				<div class="footer_center_five">
					手机天猫<br>
					<img src="images/TB14.png" alt="">
				</div>
			</div>
		</div>
		<div id="myfooter">
		<div class="footer_footer">
				<a href="#">关于天猫</a>
				<a href="#">商家服务大厅</a>
				<a href="#">开放平台</a>
				<a href="#">诚聘英才</a>
				<a href="#">联系我们</a>
				<a href="#">网站合作</a>
				<a href="#">法律声明</a>
				<a href="#">隐私权政策</a>
				<a href="#">知识产权</a>
				<a href="#">廉正举报</a>
				<a href="#">不当竞争举报</a><br>
				<a href="#">阿里巴巴集团</a>
				<a href="#">&nbsp;|&nbsp;淘宝网</a>
				<a href="#">&nbsp;|&nbsp;天猫</a>
				<a href="#">&nbsp;|&nbsp;聚划算</a>
				<a href="#">&nbsp;|&nbsp;全球速卖通</a>
				<a href="#">&nbsp;|&nbsp;阿里巴巴国际交易市场</a>
				<a href="#">&nbsp;|&nbsp;1688</a>
				<a href="#">&nbsp;|&nbsp;阿里妈妈</a>
				<a href="#">&nbsp;|&nbsp;飞猪</a>
				<a href="#">&nbsp;|&nbsp;阿里云计算</a>
				<a href="#">&nbsp;|&nbsp;AliOS</a>
				<a href="#">&nbsp;|&nbsp;阿里通信</a>
				<a href="#">&nbsp;|&nbsp;万网</a>
				<a href="#">&nbsp;|&nbsp;高德</a>
				<a href="#">&nbsp;|&nbsp;UC</a>
				<a href="#">&nbsp;|&nbsp;友盟</a>
				<a href="#">&nbsp;|&nbsp;虾米</a>
				<a href="#">&nbsp;|&nbsp;钉钉</a>
				<a href="#">&nbsp;|&nbsp;支付宝</a>
				<a href="#">&nbsp;|&nbsp;阿里安全</a><br>
				
				<span>
					增值电信业务经营许可证：浙B2-20110446&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市场名称登记证：工商网市字3301004119号 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出版物网络交易平台服务经营备案证： 新出发浙备字第2019002号
				</span><br>
				<span>
					互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;互联网药品信息服务资质证书编号：浙-（经营性）-2017-0005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" alt="">浙公网安备 33010002000120号
				</span><br>
				<span>
					医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 网络文化经营许可证：浙网文 [2021]1668-073号&nbsp;<img src="images/O1CN01VEHhJi1T2RCHFYS81_!!6000000002324-1-tps-65-70.gif" alt="" class="myFooterImg">
				</span><br>
				<span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010002&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;12318举报&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;浙B2-20110446-1</span><br>
				<span>&copy;2003-现在 TMALL.COM 版权所有</span><br>
				<div class="myFooterImg2">
					<img src="images/O1CN01Hs1MVu1IDvM07YrGh_!!6000000000860-2-tps-293-143.png" alt="">
				</div>
				
			</div>
	</div>
	</div>
</body>
<script src="js/jquery.min.js"></script>
<script>
	/* 封装一个方法，负责发起异步请求，执行查询，并且拼装页面 */
	$(function(){
		searchGoods(1,15);
		
		$("input[name='keyword']").change(function(){
			searchGoods(1,15);
		})
	})
	
	function searchGoods(pageNum,pageSize){
		var keyword  = $("#search").val();
		
		$.ajax({
			url:"/shopping/search.do?keyword="+keyword,
			type:"GET",
			data:{
				"keyword":keyword,
				"pageNum":pageNum,
				"pageSize":pageSize
			},
			success:function(data){
				// 根据 后端返回的结果 去动态的修改页面 利用js /jquery
				console.log(data);
				//清空 原有的分页信息
				$(".pageInfor").empty();
				
				var goods = data.data;
				$("input[name='keyword']").attr("value",keyword);
				
				for(var i = 0 ; i< goods.length; i++){
					//清空 表格原有的内容
					$(".top"+(i+1)).empty();
					var good = goods[i];
					var $img = $("<img class='goods_image'>").attr({src:good.gImage,alt:"图片走丢了"}).height(200);
					var $div = $("<div class='myGName'></div>").text(good.gName);
					var $h4 = $("<h4></h4>").text("￥"+good.gPrice);
					$(".top"+(i+1)).append($img).append($div).append($h4);
				}
				//拼装分页信息
				/* var $firstPage = $("<a onclick='searchBook(1)'>首页</a>")
				$(".pageInfor").append($firstPage);
				if(data.hasPrev){
					var $prevPage = $("<a onclick='searchBook("+(data.pageNum-1)+")'>上一页</a>");
					$(".pageInfor").append($prevPage);
				}
				for(var j = 1; j <= data.totalPageNum;j++ ){
					var $pageN = $("<a onclick='searchBook("+j+")'></a>").text(j);
					$(".pageInfor").append($pageN);
				}
				if(data.hasNext){
					var $nextPage = $("<a onclick='searchBook("+(data.pageNum+1)+")'>下一页</a>");
					$(".pageInfor").append($nextPage);
				}
				var $lastPage = $("<a onclick='searchBook("+data.totalPageNum+")'>尾页</a>")
				$(".totalRows").text(data.totalRows)
				$(".pageNum").text(data.pageNum)
				$(".totalPageNum").text(data.totalPageNum) */
			},
			dataType:"json" 
			
		})
		
	}
</script>
</html>